﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Cart Page</title>
    <!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>-->
    <link rel="preconnect" href="https://fonts.gstatic.com"/>
    <link href="static/css/fc1ab68d70ad48e88943ce422f4566dc.css" rel="stylesheet"/>
    <link rel="stylesheet" href="static/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="static/css/bootstrap-select.min.css"/>
    <link rel="stylesheet" href="static/css/animate.min.css"/>
    <link rel="stylesheet" href="static/css/all.min.css"/>
    <link rel="stylesheet" href="static/css/jarallax.css"/>
    <link rel="stylesheet" href="static/css/organik-icons.css"/>
    <link rel="stylesheet" href="static/css/jquery.magnific-popup.css"/>
    <link rel="stylesheet" href="static/css/nouislider.min.css"/>
    <link rel="stylesheet" href="static/css/nouislider.pips.css"/>
    <link rel="stylesheet" href="static/css/odometer.min.css"/>
    <link rel="stylesheet" href="static/css/swiper.min.css"/>
    <link rel="stylesheet" href="static/css/tiny-slider.min.css"/>
    <link href="css/common.css" rel="stylesheet" type="text/css"/>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
    <script src="js/common_js.js" type="text/javascript"></script>
    <script src="js/footer.js" type="text/javascript"></script>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="static/css/organik.css"/>
    <script>
        //当文档加载完成后再执行
        $(document).ready(function () {
            $.ajax({
                url: "http://localhost:8088/UniverseFarmBack/isLogin.do",
                dataType: "json",
                type: "get",
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                success: function (result) {
                    if (result.flag == 1) {
                        //说明已经登录
                        $("#logininfo").html("欢迎你，" + result.data.userName + "&nbsp;&nbsp;&nbsp;&nbsp;<a href='#' onclick='loginout()'  >注销</a>");
                        $("#userinfo").html("<ul class=\"main-menu__list\"><li class=\"dropdown\"><a href='index.html'><i className='organik-icon-user'></i>个人中心</a> " +
                            "<ul>\n" +
                            "<li>\n" +
                            "<a href=\"userinfo.html\">个人信息修改</a></li>\n" +
                            "<li><a href=\"index-2.html\">发布自己的元产品</a></li>\n" +
                            " <li><a href=\"index-2.html\">显示个人信息</a></li>\n" +
                            " <li><a href=\"index-2.html\">交易记录</a></li>\n" +
                            " <li><a href=\"index-2.html\">个人产品</a></li>\n" +
                            "</li>\n" +
                            "</ul>" +
                            "</li>"
                        );
                    } else {
                        //说明未登录
                        $("#logininfo").html("<a href='login.html' class='green'>登录</a> /<a href='register.html' class='green'>免费注册</a>");
                    }
                }
            });

        });


    </script>
    <script>
        function loginout() {
            $.ajax({
                url: "http://localhost:8088/UniverseFarmBack/loginOut.do",
                dataType: "json",
                type: "get",
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                success: function (result) {
                    alert(result.msg);
                    //跳转到登录页面？刷新页面
                    location.reload();
                }
            });


        }


    </script>
    <script>
        $(document).ready(function () {
            //主页商品展示
            // var myname= $("#myname").val();
            // var mypwd=$("#mypwd").val();

            $.ajax({
                url: "http://localhost:8088/UniverseFarmBack/findCart.do",
                dataType: "json",
                type: "get",
                xhrFields: {                               //保存session在跨域访问中不会丢失！！！
                    withCredentials: true
                },
                crossDomain: true,
                success: function (result) {
                    var data = result.cartList;
                    var allMoney = result.allMoney;
                    var i = 0;
                    for (i; i < data.length; i++) {
                        var str = "";
                        str = str + '<tr>' +
                            '<td>' +
                            '<div class="product-box">' +
                            '<img src="http://localhost:8088/UniverseFarmBack/static/picture/goods/' + data[i].photo + '" alt="" height="115" width="122">' +
                            ' <h3><a href="product-details.html">' + data[i].name + '</a></h3>' +
                            '</div>' +
                            '</td>' +
                            '<td>$' + data[i].price + '</td>' +
                            '<td>' +
                            '<div class="quantity-box">' +
                            // '<button type="button" class="sub">-</button>'+
                            '<input type="number" class="numberInput" value="1" min="0" max="99" step="1"/>' +
                            // '<button type="button" class="add">+</button>'+
                            '</div>' +
                            '</td>' +
                            '<td>' +
                            ' ' + data[i].totalMoney +
                            '</td>' +
                            '<td>' +
                            '<button class="organik-icon-close remove-icon" onclick="myremove(' + data[i].id + ')"></button>' +
                            '</td>' +
                            '</tr>';
                        $("#cart").append(str);
                    }
                    $("#totalMoney1").text(allMoney);
                    $("#totalMoney2").text(allMoney);

                }
            });


        })
    </script>
    <script>
        function myremove(id) {
            var f = confirm("确定要移除吗?");
            if (f == true)
                backremove(id);
            window.location.reload();
        }
    </script>
    <!-- 删除-->
    <script>
        function backremove(id) {
            $.ajax({
                url: "http://localhost:8088/UniverseFarmBack/deleteCart.do",
                dataType: "json",
                data: {id: id},
                type: "get",
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                success: function (result) {

                }
            });


        }
    </script>
    <!-- 支付-->
    <script>
        function pay() {
            var paymoney = $("#totalMoney1").html();
            $.ajax({
                url: "http://localhost:8088/UniverseFarmBack/pay.do",
                dataType: "json",
                data: {paymoney: paymoney},
                type: "get",
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                success: function (result) {
                    if (result.flag == 1) {
                        alert(result.msg);
                        clearCart();
                    } else if (result.flag == 2) {
                        alert(result.msg);
                    } else {
                        alert(result.msg);
                        window.location.replace("login.html");
                    }
                }
            });


        }
    </script>
    <script>
        function clearCart() {
            $.ajax({
                url: "http://localhost:8088/UniverseFarmBack/clearCart.do",
                dataType: "json",
                type: "get",
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                success: function (result) {
                    $("#cart").html("");
                    $("#totalMoney1").html("0.0")
                    $("#totalMoney2").html("0.0")
                }
            });


        }
    </script>
    <script>
        function myclear() {
            var f = confirm("亲，你确定要清空购物车吗?");
            if (f == true) {
                clearCart();
            }
        }
    </script>
</head>
<body>
<div class="preloader">
    <img class="preloader__image" width="55" src="static/picture/loader.png" alt=""/>
</div>

<div class="page-wrapper">
    <header class="main-header">
        <div class="topbar">
            <div class="container">
                <div id="logininfo"></div>
                <div class="main-logo">
                    <a href="index.html" class="logo">
                        <img src="static/picture/universe.PNG" width="300" alt="">
                    </a>
                    <div class="mobile-nav__buttons">
                        <a href="#" class="search-toggler"><i class="organik-icon-magnifying-glass"></i></a>
                        <a href="#" class="mini-cart__toggler"><i class="organik-icon-shopping-cart"></i></a>
                    </div>
                    <span class="fa fa-bars mobile-nav__toggler"></span>
                </div>
                <div class="topbar__left">
                    <div class="topbar__social">
                        <a href="#" class="fab fa-twitter"></a>
                        <a href="#" class="fab fa-facebook-square"></a>
                        <a href="#" class="fab fa-instagram"></a>
                    </div>
                    <div class="topbar__info">
                        <i class="organik-icon-email"></i>
                        <p>Email <a href="/cdn-cgi/l/email-protection#8de4e3ebe2cde2ffeaece3e4e6a3eee2e0"><span
                                class="__cf_email__" data-cfemail="90f9fef6ffd0ffe2f7f1fef9fbbef3fffd">[email&#160;protected]</span></a>
                        </p>
                    </div>
                </div>
                <div class="topbar__right">
                    <div class="topbar__info">
                        <i class="organik-icon-calling"></i>
                        <p>Phone <a href="tel:+92-666-888-0000">92 666 888 0000</a></p>
                    </div>
                    <div class="topbar__buttons">
                        <a href="#" class="search-toggler"><i class="organik-icon-magnifying-glass"></i></a>
                        <a href="#" class="mini-cart__toggler"><i class="organik-icon-shopping-cart"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <nav class="main-menu">
            <div class="container">
                <!--个人信息页面-->
                <div class="main-menu__login" id="userinfo">
                </div>
                <ul class="main-menu__list">
                    <li class="dropdown">
                        <a href="index.html">主页</a>
                        <ul>
                            <li><a href="index.html">主界页</a></li>
                            <li><a href="#shangpin">商品</a></li>
                            <li><a href="#jianjie">简介</a></li>
                            <li><a href="#gonglue">攻略</a></li>
                            <!--<li class="dropdown">
                                <a href="#">Header Styles</a>
                                <ul>
                                    <li><a href="index.html">Header One</a></li>
                                    <li><a href="index-2.html">Header Two</a></li>
                                </ul>
                            </li>-->
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="products.html">交易市场</a>
                        <!--<ul>
                            <li><a href="products.html">Shop</a></li>
                            <li><a href="product-details.html">Product Details</a></li>
                            <li><a href="car.html">Cart Page</a></li>
                            <li><a href="checkout.html">Checkout</a></li>
                        </ul>-->
                    </li>
                    <li class="dropdown"><a href="car.html">购物车</a>
                        <!--<ul>
                            <li><a href="news.html">购物车</a></li>
                            <li><a href="news-details.html">News Details</a></li>
                        </ul>-->
                    </li>
                    <li><a href="soils.html">个人农场</a></li>
                    <li><a href="contact.html">农场社区</a></li>
                </ul>
                <!--<li>
                <a href="about.html">About</a>
                </li>-->
                <!--<li class="dropdown">
                    <a href="products.html">Shop</a>
                    <ul>
                        <li><a href="products.html">Shop</a></li>
                        <li><a href="product-details.html">Product Details</a></li>
                        <li><a href="cart.html">Cart Page</a></li>
                        <li><a href="checkout.html">Checkout</a></li>
                    </ul>
                </li>
                <li class="dropdown"><a href="news.html">News</a>
                    <ul>
                        <li><a href="news.html">News</a></li>
                        <li><a href="news-details.html">News Details</a></li>
                    </ul>
                </li>
                <li><a href="contact.html">Contact</a></li>
            </ul>-->
                <div class="main-menu__language">
                    <img src="static/picture/flag-1-0.jpg" alt="">
                    <label class="sr-only" for="language-select">选择语言</label>

                    <select class="selectpicker" id="language-select-header">
                        <option value="english">中文</option>
                        <option value="arabic">英语</option>
                    </select>
                </div>
            </div>
        </nav>
    </header>
    <div class="stricky-header stricked-menu main-menu">
        <div class="sticky-header__content"></div>
    </div>
    <section class="page-header">
        <div class="page-header__bg" style="background-image: url(static/images/page-header-bg-1-1.jpg);"></div>

        <div class="container">
            <h2>购物车</h2>
            <ul class="thm-breadcrumb list-unstyled">
                <li><a href="index.html">首页</a></li>
                <li>/</li>
                <li><span>购物车</span></li>
            </ul>
        </div>
    </section>
    <section class="cart-page">
        <div class="container">
            <div class="table-responsive">
                <table class="table cart-table">
                    <thead>
                    <tr>
                        <th>商品</th>
                        <th>价格</th>
                        <th>数量</th>
                        <th>总价</th>
                        <th>删除</th>
                    </tr>
                    </thead>
                    <tbody id="cart">
                    <!--<tr>-->
                    <!--<td>-->
                    <!--<div class="product-box">-->
                    <!--<img src="static/picture/cart-1-1.jpg" alt="">-->
                    <!--<h3><a href="product-details.html">Banana</a></h3>-->
                    <!--</div>-->
                    <!--</td>-->
                    <!--<td>$9.99</td>-->
                    <!--<td>-->
                    <!--<div class="quantity-box">-->
                    <!--<button type="button" class="sub">-</button>-->
                    <!--<input type="number" id="2" value="1" />-->
                    <!--<button type="button" class="add">+</button>-->
                    <!--</div>-->
                    <!--</td>-->
                    <!--<td>-->
                    <!--$9.99-->
                    <!--</td>-->
                    <!--<td>-->
                    <!--<i class="organik-icon-close remove-icon"></i>-->
                    <!--</td>-->
                    <!--</tr>-->
                    <!--<tr>-->
                    <!--<td>-->
                    <!--<div class="product-box">-->
                    <!--<img src="static/picture/cart-1-2.jpg" alt="">-->
                    <!--<h3><a href="product-details.html">Tomatoes</a></h3>-->
                    <!--</div>-->
                    <!--</td>-->
                    <!--<td>$9.99</td>-->
                    <!--<td>-->
                    <!--<div class="quantity-box">-->
                    <!--<button type="button" class="sub">-</button>-->
                    <!--<input type="number" id="2" value="1" />-->
                    <!--<button type="button" class="add">+</button>-->
                    <!--</div>-->
                    <!--</td>-->
                    <!--<td>-->
                    <!--$9.99-->
                    <!--</td>-->
                    <!--<td>-->
                    <!--<i class="organik-icon-close"></i>-->
                    <!--</td>-->
                    <!--</tr>-->
                    </tbody>
                </table>
            </div>
            <div class="row">
                <div class="col-lg-8">
                    <form action="#" class="contact-one__form">
                    </form>
                </div>
                <div class="col-lg-4">
                    <ul class="cart-total list-unstyled">
                        <li>
                            <span>总价</span>
                            <span id="totalMoney1">$19.98 USD</span>
                        </li>
                        <!--<li>-->
                        <!--<span>商品折扣</span>-->
                        <!--<span>$0.00 USD</span>-->
                        <!--</li>-->
                        <li>
                            <span>支付</span>
                            <span id="totalMoney2">$19.98 USD</span>
                        </li>
                    </ul>
                    <div class="button-box">
                        <button onclick="myclear()" class="thm-btn">清空</button>
                        <button class="thm-btn" onclick="pay()">支付</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer class="site-footer background-black-2">
        <img src="static/picture/footer-bg-1-1.png" alt="" class="site-footer__shape-1">
        <img src="static/picture/footer-bg-1-2.png" alt="" class="site-footer__shape-2">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
                    <div class="footer-widget footer-widget__about-widget">
                        <a href="index.html" class="footer-widget__logo">
                            <img src="static/picture/universe.PNG" alt="" width="250" height="80">
                        </a>
                        <p class="thm-text-dark">
                            请相信快乐的想法，从没有离开过我们的身旁，<br>
                            就像网络上虚拟的农场，终会成为现实的天堂。
                        </p>
                    </div>
                </div>
                <div class="col-sm-12 col-md-6 col-lg-6 col-xl-2">
                    <div class="footer-widget footer-widget__contact-widget">
                        <h3 class="footer-widget__title">联系我们</h3>
                        <ul class="list-unstyled footer-widget__contact">
                            <li>
                                <i class="fa fa-phone-square"></i>
                                <a href="tel:18360495939">18360495939</a>
                            </li>
                            <li>
                                <i class="fa fa-envelope"></i>
                                <a href="/cdn-cgi/l/email-protection#8be2e5ede4cbe8e4e6fbeae5f2a5e8e4e6"><span
                                        class="__cf_email__" data-cfemail="620b0c040d22010d0f12030c1b4c010d0f">1776356421@qq.com</span></a>
                            </li>
                            <li>
                                <i class="fa fa-map-marker-alt"></i>
                                <a href="#">福建省厦门市集美大学诚毅学院
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-12 col-md-6 col-lg-6 col-xl-2">
                    <div class="footer-widget footer-widget__links-widget">
                        <h3 class="footer-widget__title">为你推荐</h3>
                        <ul class="list-unstyled footer-widget__links">
                            <li>
                                <a href="index.html">热卖榜单</a>
                            </li>
                            <li>
                                <a href="products.html">购物</a>
                            </li>
                            <li>
                                <a href="about.html">关于我们</a>
                            </li>
                            <li>
                                <a href="contact.html">反馈</a>
                            </li>
                            <li>
                                <a href="contact.html">客服</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-12 col-md-6 col-lg-6 col-xl-2">
                    <div class="footer-widget">
                        <h3 class="footer-widget__title">配送方式</h3>
                        <ul class="list-unstyled footer-widget__links">
                            <li>
                                <a href="products.html">上门自提</a>
                            </li>
                            <li>
                                <a href="checkout.html">211限时达</a>
                            </li>
                            <li>
                                <a href="contact.html">配送服务查询</a>
                            </li>
                            <li>
                                <a href="contact.html">海外配送</a>
                            </li>
                            <li>
                                <a href="contact.html">配送费收取标准</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
                    <div class="footer-widget">
                        <h3 class="footer-widget__title">售后服务</h3>
                        <form action="#" data-url="YOUR_MAILCHIMP_URL" class="mc-form">
                            <input type="email" name="EMAIL" id="mc-email" placeholder="退款说明">
                            <button type="submit">价格保护</button>
                        </form>
                        <div class="mc-form__response"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-footer">
            <div class="container">
                <hr>
                <div class="inner-container text-center">
                    <div class="bottom-footer__social">
                        <a href="#" class="fab fa-twitter"></a>
                        <a href="#" class="fab fa-facebook-square"></a>
                        <a href="#" class="fab fa-instagram"></a>
                    </div>

                </div>
            </div>
        </div>
    </footer>
</div>
<div class="mobile-nav__wrapper">
    <div class="mobile-nav__overlay mobile-nav__toggler"></div>

    <div class="mobile-nav__content">
        <span class="mobile-nav__close mobile-nav__toggler"><i class="organik-icon-close"></i></span>
        <div class="logo-box">
            <a href="personal.html" aria-label="logo image"><img src="static/picture/logo-light.png" width="155"
                                                                 alt=""/></a>
        </div>

        <div class="mobile-nav__container"></div>

        <ul class="mobile-nav__contact list-unstyled">
            <li>
                <i class="organik-icon-email"></i>
                <a href="/cdn-cgi/l/email-protection#7e101b1b1a161b120e3e110c191f101715501d1113"><span
                        class="__cf_email__" data-cfemail="741a1111101c111804341b0613151a1d1f5a171b19">[email&#160;protected]</span></a>
            </li>
            <li>
                <i class="organik-icon-calling"></i>
                <a href="tel:666-888-0000">666 888 0000</a>
            </li>
        </ul>
        <div class="mobile-nav__top">
            <div class="mobile-nav__language">
                <img src="static/picture/flag-1-1.jpg" alt="">
                <label class="sr-only" for="language-select">select language</label>

                <select class="selectpicker" id="language-select">
                    <option value="english">English</option>
                    <option value="arabic">Arabic</option>
                </select>
            </div>
            <div class="main-menu__login">
                <a href="#"><i class="organik-icon-user"></i>Login / Register</a>
            </div>
        </div>
    </div>

</div>

<div class="mini-cart">
    <div class="mini-cart__overlay mini-cart__toggler"></div>
    <div class="mini-cart__content">
        <div class="mini-cart__top">
            <h3 class="mini-cart__title">Shopping Cart</h3>
            <span class="mini-cart__close mini-cart__toggler"><i class="organik-icon-close"></i></span>
        </div>
        <div class="mini-cart__item">
            <img src="static/picture/cart-1-1.jpg" alt="">
            <div class="mini-cart__item-content">
                <div class="mini-cart__item-top">
                    <h3><a href="product-details.html">Banana</a></h3>
                    <p>$9.99</p>
                </div>
                <div class="quantity-box">
                    <button type="button" class="sub">-</button>
                    <input type="number" id="2" value="1"/>
                    <button type="button" class="add">+</button>
                </div>
            </div>
        </div>
        <div class="mini-cart__item">
            <img src="static/picture/cart-1-2.jpg" alt="">
            <div class="mini-cart__item-content">
                <div class="mini-cart__item-top">
                    <h3><a href="product-details.html">Tomato</a></h3>
                    <p>$9.99</p>
                </div>
                <div class="quantity-box">
                    <button type="button" class="sub">-</button>
                    <input type="number" id="2" value="1"/>
                    <button type="button" class="add">+</button>
                </div>
            </div>
        </div>
        <div class="mini-cart__item">
            <img src="static/picture/cart-1-3.jpg" alt="">
            <div class="mini-cart__item-content">
                <div class="mini-cart__item-top">
                    <h3><a href="product-details.html">Bread</a></h3>
                    <p>$9.99</p>
                </div>
                <div class="quantity-box">
                    <button type="button" class="sub">-</button>
                    <input type="number" id="2" value="1"/>
                    <button type="button" class="add">+</button>
                </div>
            </div>
        </div>
        <a href="checkout.html" class="thm-btn mini-cart__checkout">Proceed To Checkout</a>
    </div>
</div>
<div class="search-popup">
    <div class="search-popup__overlay search-toggler"></div>

    <div class="search-popup__content">
        <form action="#">
            <label for="search" class="sr-only">search here</label>
            <input type="text" id="search" placeholder="Search Here..."/>
            <button type="submit" aria-label="search submit" class="thm-btn">
                <i class="organik-icon-magnifying-glass"></i>
            </button>
        </form>
    </div>

</div>

<a href="#" data-target="html" class="scroll-to-target scroll-to-top"><i class="fa fa-angle-up"></i></a>
<script src="static/js/jquery-3.5.1.min.js"></script>
<script src="static/js/bootstrap.bundle.min.js"></script>
<script src="static/js/bootstrap-select.min.js"></script>
<script src="static/js/jarallax.min.js"></script>
<script src="static/js/jquery.ajaxchimp.min.js"></script>
<script src="static/js/jquery.appear.min.js"></script>
<script src="static/js/jquery.circle-progress.min.js"></script>
<script src="static/js/jquery.magnific-popup.min.js"></script>
<script src="static/js/jquery.validate.min.js"></script>
<script src="static/js/nouislider.min.js"></script>
<script src="static/js/odometer.min.js"></script>
<script src="static/js/swiper.min.js"></script>
<script src="static/js/tiny-slider.min.js"></script>
<script src="static/js/wnumb.min.js"></script>
<script src="static/js/wow.js"></script>
<script src="static/js/isotope.js"></script>
<script src="static/js/countdown.min.js"></script>

<script src="static/js/organik.js"></script>
</body>
</html>